<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline;

        }

        input {
            width: 500px;
        }
    </style>
</head>

<body>
    <form action="">
        用户名：<input type="text" id="username" placeholder="中英文均可，最长14个英文或者7个汉字"><span></span>
        <br>


    </form>
    <script>
        var user = document.querySelector("#username")
        var phone = document.querySelector('#phone')
        var psw = document.querySelector('#psw')
        user.onblur = function () {
            console.log(11)
            var reg = /^([a-zA-Z]{1,14}|[\u4e00-\u9fa5]{7})$/
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = "x"
            }
            var text = this.value
            var han = 0
            var zimu = 0
            for (var i = 0; i < text.length; i++) {
                if (/[\u4e00-\u9fa5]/.test(text[i])) {
                    han = han + 2
                } else {
                    zimu++
                }
            }
            if (han + zimu <= 14) {
                this.nextElementSibling.innerHTML = "√"
            } else {
                this.nextElementSibling.innerHTML = "×"
            }
        }
    </script>
</body>

</html>